<template>
	<view class="content">
		<button class="size" @tap="create">创建新的Webview窗口</button>
		<button class="size" @tap="open">创建并打开Webview窗口</button>
		<button class="size" @tap="prefetchURL">预载网络页面</button>
		<button class="size" @tap="addEventListener">监听Webview窗口事件</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				player: null,
				w: null,
				pusher: null,
				nw: null
			}
		},
		methods: {
			create() {
				// 创建一个新Webview窗口
				this.w = plus.webview.create('/hybrid/html/view.html', '/hybrid/html/view.html', {
					top: '0px',
					bottom: '0px',
					background: "#ccc",
					backgroundColorTop: "rgba(255,0,0,0.5)",
					backgroundColorBottom: "rgba(255,0,0,0.5)", // 底部窗口背景色
					progress: {
						color: '#0000FF'
					},
					pullToRefresh: {
						support: true,
						color: "#2BD009",
						style: "default",
						height: "50px",
						range: "50px",
						contentdown: {
							caption: '下拉可以刷新'
						},
						contentover: {
							caption: '释放立即刷新'
						},
						contentrefresh: {
							caption: '正在刷新...'
						}

					}

				}, {
					preload: 'preload webview'
				});
				this.animate();
								
				this.w.show(); // 显示窗口
				this.w.drag({
					direction: 'left',
					moveMode: 'followFinger'
				}, {
					view: 'newdrag',
					moveMode: 'follow'
				}, function(e) {
					console.log('Left drag event: ' + JSON.stringify(e));
				});
				// 右滑隐藏新窗口
				this.w.drag({
					direction: 'right',
					moveMode: 'followFinger'
				}, {
					view: this.w,
					moveMode: 'follow'
				}, function(e) {
					console.log('Right drag event: ' + JSON.stringify(e));
				});

			},
			open() {
				let w = plus.webview.open('http://m.weibo.cn/u/3196963860');
			},
			prefetchURL() {
				let url = 'http://m.weibo.cn/u/3196963860';
				plus.webview.prefetchURL(url);
				let wn = plus.webview.create(url, 'test', {
					render: 'always'
				});
				wn.show('none');
			},
			addEventListener() {
				let that = this;
				if (that.nw) {
					return;
				}
				let w = plus.nativeUI.showWaiting()
				// 打开新窗口
				that.nw = plus.webview.create('http://m.weibo.cn/u/3196963860');
				that.nw.addEventListener('loaded', function() {
					console.log('New Window loaded!');
					that.nw.show(); // 显示窗口
					w.close();
					w = null;
				}, false);
			},
			animate() {
				this.w.animate({
					type: 'shrink',
					frames: 20,
					region: {
						top: '44px',
						bottom: '48px'
					},
					duration: 1000
				}, function() {
					console.log("animate")
					this.w.restore(); // 内容动画结束后可调用此动画恢复显示内容
				});
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.size {
		margin: 30rpx 0;
	}
</style>
